<!--
 * @Descripttion: 合同阶段
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-10-21 11:02:04
 * @LastEditors: GW
 * @LastEditTime: 2021-10-24 11:32:02
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="big-main-wrapper warehouse-type-wrapper" style="margin:2px 8px;">
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :span="2" v-if="permissions.includes('phaseGroup:add')">
                            <div class="btns" @click="editDataFun(1)">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                        <a-col :span="2" v-if="permissions.includes('phaseGroup:edit')">
                            <div class="btns" @click="editDataFun(2)">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改</div>
                            </div>
                        </a-col>
                        <a-col :span="2" v-if="permissions.includes('phaseGroup:delete')">
                            <div class="btns" @click="remove">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <div class="table-wrapper-box">
                <a-table :row-selection="{ selectedRowKeys: selectedKeys, onChange: onSelectChange }" :columns="columns" :data-source="data" bordered />
            </div>
        </div>

        <a-modal v-model="visible" :title="modalTitle" @cancel="()=>{visible = false}" class="phase-box">
            <a-form-model :model="requestData" :label-col="{span:6}" :wrapper-col="{span:12}">
                <a-form-model-item label="阶段编码" :rules="[{ required: true,trigger:'input'}]">
                    <a-input placeholder="请输入两位数阶段编码" maxLength="2" onkeyup="value=value.toString().match(/^\d+(?:\.\d{0,5})?/)" v-model.trim="requestData.code" />
                </a-form-model-item>
                <a-form-model-item label="阶段名称" :rules="[{ required: true,trigger:'input'}]">
                    <a-input placeholder="请输入阶段名称" v-model.trim="requestData.name" />
                </a-form-model-item>
                <a-form-model-item label="是否质保金阶段">
                    <a-radio-group v-model="requestData.isRetentionMoney">
                        <a-radio :value="1">
                            是
                        </a-radio>
                        <a-radio :value="0">
                            否
                        </a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item label="阶段说明">
                    <a-textarea placeholder="请输入阶段说明" :col="10" v-model.trim="requestData.content">
                    </a-textarea>
                </a-form-model-item>
                <a-form-model-item label="备注">
                    <a-input placeholder="请输入备注" v-model.trim="requestData.remarks" />
                </a-form-model-item>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="submitRequest">
                    确认
                </a-button>
                <a-button @click="()=>{visible = false}">
                    取消
                </a-button>
            </template>
        </a-modal>
    </div>
</template>
<script>

import { mapState } from "vuex";

import { groupList, groupDelete, groupSave } from "@/api/contract/contractPhase";

import { classPageListToTree, searchInTreeData } from "@/utils/tree";

export default {
    data () {
        return {
            data: [],
            visible: false,
            columns: [{
                title: '阶段编码',
                dataIndex: 'code',
            },
            {
                title: '阶段名称',
                dataIndex: 'name',
            },
            {
                title: '是否质保金阶段',
                dataIndex: 'isRetentionMoney',
                customRender: (text, row, index) => {
                    return text == 1 ? '是' : '否';
                }
            },
            {
                title: '阶段说明',
                dataIndex: 'content',
            }, {
                title: '备注',
                dataIndex: 'remarks',
            },],
            pageSize: -1, // 每页多少条数据
            current: 1, // 当前页
            thisData: [], // 当前选中的数据
            visible: false, // 弹出框默认隐藏
            putStorage: [], // 入库
            outbound: [], // 出库
            selectedKeys: [],
            selectedRows: [],
            modalTitle: '',
            requestData: {
                name: null,
                code: null,
                content: null,
                remarks: null,
                isRetentionMoney: 0,
            }
        };
    },
    created () {
        this.getData();
        // this.removeData();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    methods: {
        onSelectChange (keys, rows) {
            this.selectedKeys = keys;
            this.selectedRows = rows;
        },
        editDataFun (type) {

            //新增 or 修改
            if (type == 1) {
                this.modalTitle = '新增合同阶段';
                this.requestData = {
                    name: null,
                    code: null,
                    content: null,
                    remarks: null,
                    isRetentionMoney: 0,
                }
                this.visible = true;
            } else {
                if (this.selectedRows.length != 1) {
                    this.$message.warning('请选择一条数据修改');
                    return;
                }
                this.requestData = this.selectedRows[0];
                this.modalTitle = '修改合同阶段';
                this.visible = true;
            }
        },
        getData () {
            // 获取收发类别数据
            const { pageSize, current } = this;
            let params = { size: pageSize, current: current };
            groupList(params).then(res => {
                if (res.code == 200) {
                    if (res.data.records.length > 0) {
                        this.data = res.data.records.map(r => {
                            return { ...r, key: r.id }
                        })
                    }
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        remove () {
            if (this.selectedKeys.length != 1) {
                this.$message.warning("请选择一条数据");
                return;
            }
            let that = this;
            this.$confirm({
                title: `是否确认删除 ${that.selectedRows[0].name}`,
                content: "",
                onOk () {
                    groupDelete({ id: that.selectedRows[0].id }).then(res => {
                        if (res.code == 200) {
                            that.selectedKeys = [];
                            that.$message.success("删除成功");
                            that.getData();
                        } else {
                            that.$message.warning(res.message);
                        }
                    })
                },
                onCancel () { }
            });
        },
        submitRequest () {
            if (this.requestData.code == null) {
                this.$message.warning('请输入分组编码');
                return;
            }
            if (this.requestData.code.length != 2) {
                this.$message.warning('请输入两位数编码');
                return;
            }
            if (this.requestData.name == null) {
                this.$message.warning('请输入分组名称');
                return;
            }
            groupSave(this.requestData).then(res => {
                if (res.code == 200) {
                    this.selectedKeys = [];
                    this.$message.success("保存成功");
                    this.visible = false;
                    this.getData();
                } else {
                    // this.$message.warning(res.message);
                }
            })
        }
    },
};
</script>
<style lang="less" scoped>
    .content-box {
        height: 100%;
        width: 240px;
        display: flex;
        flex-flow: column;
    }
    .btn-wrapper {
        // min-height: 52px;
        // border-bottom: 1px solid rgba(173, 173, 173, 0.5);
        margin-bottom: 5px;
        .btns {
            font-size: 14px;
            cursor: pointer;
            overflow: hidden;
        }
        .btns-text {
            margin-top: -2px;
            height: 20px;
            overflow: hidden;
        }
        .btns-icon {
            font-size: 22px;
            color: rgb(24, 144, 255);
        }
        .btns:hover {
            .btns-icon {
                color: rgb(45, 85, 216);
            }
            font-size: 14px;
            transition: all 0.2s;
        }
        .btns:active {
            animation: btns-transform 0.1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        }
    }
    @keyframes btns-transform {
        10%,
        90% {
            transform: (translate3d(-1px, 0px, 0));
        }
        20%,
        80% {
            transform: (translate3d(2px, 0px, 5px));
        }
        30%,
        50%,
        70% {
            transform: (translate3d(-4px, 0px, -8px));
        }
        40%,
        60% {
            transform: (translate3d(4px, 0px, 8px));
        }
    }
</style>
<style lang="less">
    @import '~@/style/setting/inventory.less';
    .warehouse-type-wrapper {
        margin: 0px;
    }
    .phase-box {
        .ant-form-item {
            margin-bottom: 0px;
        }
    }
    .table-wrapper-box{
        height:calc(100% - 45px);
        overflow-y: auto;
    }
</style>